<!--
 * @Author: 花香蝶自来 1026583651@qq.com
 * @Date: 2024-07-14 20:39:18
 * @LastEditors: 花香蝶自来 1026583651@qq.com
 * @LastEditTime: 2024-07-14 20:50:35
 * @FilePath: /driver/components/zmodal/zmodal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view>
		<!-- 1541 -->
		<u-modal :show="show" ref="uModal" :title="config.title" :show-title="config.showtitle"
			:confirm-text="config.confirmText" :cancel-text="config.cancelText" :show-cancel-button="config.showcancel"
			@confirm="confirm" @cancel="cancel">
			<slot>
				<view class="modalinput" v-if="config.type == 'input'">
					<u-input :focus="true" :placeholder="config.placeholder" v-model="config.modalvalue" />
					<!-- type="number" -->
				</view>
				<view class="u-model__content__message" v-else>
					{{ config.content || "内容"}}
				</view>
			</slot>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "zmodal",
		data() {
			return {
				show: false,
				defaultconfig: {
					showtitle: true,
					showcancel: true,
					placeholder: "请输入内容",
					modalvalue: "",
					type: "",
					showtitle: "提示",
					confirmText: "确认",
					cancelText: "取消"
				},
				config: {},
			};
		},
		methods: {
			init(config) {
				this.config = {
					...this.defaultconfig,
					...config,
				};
				this.show = true;
			},

			close() {
				this.show = false;
			},
			async confirm() {
				this.show = false;
				if (this.config.confirm) {
					this.config.confirm(this.config);
				}
			},
			async cancel() {
				this.show = false;
				console.log("cancel");
				if (this.config.cancel) {
					this.config.cancel();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.modalinput {
		padding: 20rpx;
	}

	.u-model__content__message {
		// padding: 17px;
		font-size: 14px;
		text-align: center;
		color: #606266;
	}
</style>